<template>
    <el-container>
        <el-header style="padding: 0; height: 65px;">
            <Header :selected="-1" />
        </el-header>
        <el-main style="padding: 0; width: 968px; margin: auto;">
            <div v-if="loading" class="loading-area">

            </div>
            <div v-else>
                <div class="detail-head">
                    <div class="left">
                        <img class="app-icon" :src="app.icon">
                        <div class="app-info">
                            <div class="app-title">{{ app.name }}</div>
                            <div class="tip">
                                <div class="tip_item">
                                    <div>广告检测</div>
                                    <div class="circle"></div>
                                </div>
                                <div class="tip_item">
                                    <div>病毒检测</div>
                                    <div class="circle"></div>
                                </div>
                                <div class="tip_item">
                                    <div>人工复检</div>
                                    <div class="circle"></div>
                                </div>
                                <div class="tip_item">
                                    <div>绿色应用</div>
                                </div>
                            </div>
                            <div class="bottom">
                                <div>
                                    <el-rate class="rate" :value="parseFloat(app.star)" show-score disabled></el-rate>
                                </div>
                                <div class="app-installed">{{ app.installed }} 次安装</div>
                            </div>
                        </div>
                    </div>
                    <div class="right">
                        <el-button size="large" @click="download()" round>下载</el-button>
                    </div>
                </div>
                <swiper style="padding: 12px 0 24px 0" :options="swiperOptions">
                    <swiper-slide v-for="(item,index) in app.banners" :key="index">
                        <img class="swiper-img" :src="item">
                    </swiper-slide>
                </swiper>
                <div class="recommend">
                    <div class="title">{{ app.recommend }}</div>
                </div>

                <TitleCard class="desc" title="应用介绍">
                    <div class="content">{{ app.description }}</div>
                </TitleCard>

                <TitleCard title="应用信息">
                    <div class="info">
                        <div class="app-singleinfo">
                            <div class="info-key">大小</div>
                            <div class="info-val">{{ app.size }}MB</div>
                        </div>
                        <div class="app-singleinfo">
                            <div class="info-key">开发者</div>
                            <div class="info-val">{{ app.developer }}</div>
                        </div>
                        <div class="app-singleinfo">
                            <div class="info-key">版本</div>
                            <div class="info-val">{{ app.version }}</div>
                        </div>
                        <div class="app-singleinfo">
                            <div class="info-key">更新时间</div>
                            <div class="info-val">{{ app.updateTime }}</div>
                        </div>
                    </div>
                </TitleCard>

                <HorizonalAppCard title="相关推荐" :apps="apps" />
                <div style="height: 20px;">

                </div>
            </div>
        </el-main>
        <el-footer style="padding: 0;">
            <Footer />
        </el-footer>
    </el-container>
</template>

<script>
import { getSync } from '@/util/request'
import Header from '@/components/Header.vue'
import Footer from '@/components/Footer.vue'
import TitleCard from '@/components/TitleCard.vue'
import HorizonalAppCard from '@/components/HorizonalAppCard.vue'
import { swiper, swiperSlide } from 'vue-awesome-swiper'
import 'swiper/dist/css/swiper.css'
let _this = null
export default {
    name: 'AppDetail',
    components: {
        Header,
        Footer,
        TitleCard,
        HorizonalAppCard,
        swiper,
        swiperSlide
    },
    data() {
        return {
            loading: true,
            swiperOptions: {
                grabCursor: true,
                freeMode: true,
                slidesPerView: 4,
                spaceBetween: 16,
            },
            app: {},
            apps: []
        }
    },
    mounted() {
        _this = this
        const lo = this.$loading({
            lock: true,
            spinner: 'el-icon-loading',
            background: '#fff',
            target: document.querySelector('.loading-area')
        })
        let id = parseInt(this.$route.params.id)
        getSync('/api/page/detail?id=' + id).then((res) => {
            if (res.code == 200) {
                this.app = res.data.app
                this.apps = res.data.apps
                this.loading = false
                lo.close()
            }
        })
    },
    methods: {
        download: () => {
            getSync('/api/app/download?id=' + _this.app.id).then((res) => {
                let blob = new Blob([res.data], { type: 'application/xls' })
                let eleLink = document.createElement('a')
                let href = window.URL.createObjectURL(blob)
                eleLink.style.display = 'none'
                eleLink.href = href
                eleLink.download = _this.app.name + '.apk'
                document.body.appendChild(eleLink)
                eleLink.click()
                document.body.removeChild(eleLink)
                window.URL.revokeObjectURL(href)
            })
        }
    }
}
</script>

<style lang="scss" scoped>
.loading-area {
    height: 600px;
    border-top: 1px solid #f2f2f2;
}

.detail-head {
    height: 112px;
    padding: 20px 0;
    display: flex;

    .left {
        display: flex;

        .app-icon {
            width: 112px;
            height: 112px;
            border-radius: 16px;
        }

        .app-info {
            width: 694px;
            padding: 8px 25px;
        }

        .app-title {
            font-size: 24px;
            font-weight: 400;
        }

        .tip {
            display: flex;
            opacity: .38;
            font-size: 12px;

            .tip_item {
                display: flex;
            }

            .circle {
                width: 2px;
                height: 2px;
                border-radius: 1.5px;
                margin: auto 8px;
                background-color: #000;
            }
        }

        .bottom {
            display: flex;
            margin-top: 36px;

            .rate {
                width: 90px;
                height: 13px;
                margin-right: 4px;

                :deep(.el-rate__item) {
                    width: 12px;
                    height: 12px;
                }

                :deep(.el-rate__icon) {
                    margin-top: -2px;
                    margin-left: -1px;
                    font-size: 14px;
                    cursor: pointer;
                }

                :deep(.el-rate__text) {
                    padding-left: 6px;
                    font-size: 14px;
                    cursor: pointer;
                    opacity: 0.6;
                }
            }

            .app-installed {
                margin-left: 12px;
                opacity: 0.6;
                font-size: 14px;
                font-weight: 400;
            }
        }
    }

    .right {
        display: flex;
        flex-direction: column;
        justify-content: center;

        .el-button {
            width: 112px;
            height: 36px;
            color: white;
            background-color: #007dff;
            border-radius: 18px;
        }

        .el-button:hover {
            background-color: rgba(0, 125, 255, 0.7);
        }
    }
}

.swiper-img {
    width: 230px;
    height: 410px;
    border-radius: 12px;
}

.recommend {
    padding: 20px 0;
    border-top: 1px solid #f2f2f2;
    border-bottom: 1px solid #f2f2f2;

    .title {
        opacity: .8;
        font-size: 14px;
    }
}

.desc {

    .content {
        white-space: pre-line;
        min-height: 100px;
        opacity: 0.8;
        font-size: 14px;
        line-height: 20px;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}

.info {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;

    .app-singleinfo {
        width: 446px;
        height: 44px;
        padding: 0 5px;
        border-bottom: 1px solid #f2f2f2;
        display: flex;
        align-items: center;
        justify-content: space-between;

        .info-key {
            opacity: 0.8;
            font-size: 14px;
        }

        .info-val {
            float: right;
            opacity: 0.8;
            font-size: 14px;
        }
    }

    .app-singleinfo:hover {
        background-color: rgba(#000, 0.05);
    }
}
</style>